<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../assets/js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>输入框数据绑定</h3>
			<p v-text="message"></p>
			<p><input type="text" v-model="message" /></p>
			<p>取代 imput 监听 change 事件:<input type="text"  v-model.lazy="message"/> </p>
			<p> 输入字符串转为数字:<input type="text" v-model.number="message" /> </p>
			<p> 输入去掉首尾空格:<input type="text" v-model.trim="message" /> </p>
			<hr />
			<h3>文本域数据绑定</h3>
			<p><textarea v-model="message"></textarea> </p>
			<hr />
			<h3>多选绑定一个数组</h3>
			<p>
				<input type="checkbox" id="form1" value="电影" v-model="arryName" /><label for="form1">电影{{isSelect}}</label> 
				<input type="checkbox" id="form2" value="美食" v-model="arryName" /><label for="form2">美食{{isSelect}}</label> 
				<input type="checkbox" id="form3" value="酒店" v-model="arryName" /><label for="form3">酒店{{isSelect}}</label>
			</p>
			<p>{{arryName}}</p>
			
			<hr />
			<h3>单选按钮绑定数据</h3>
			<p>
				<input type="radio" id="form4" value="男" v-model="sex" /><label for="form4">男</label> 
				<input type="radio" id="form5" value="女" v-model="sex" /><label for="form5">女</label> 
				
			</p>
			<p>{{sex}}</p>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					message:"Hello world!",
					isSelect:false,
					arryName:[],
					sex:[]
				}
			})
		</script>
	</body>
</html>
